<template>
    <div style="position: relative;">
      <el-form ref="ProjectListFilter" :model="ProjectList" :size="defaultFormItemSize"
               label-width="100px" label-position="right" @submit.native.prevent>
          <filter-box :item-width="350">
            <el-form-item label="项目名称" prop="formFilter.name">
              <el-input class="filter-item" v-model="ProjectList.formFilter.name"
                        :clearable="true" placeholder="输入项目名称/模糊查询"/>
            </el-form-item>
            <el-form-item label="简称" prop="formFilter.shorthand">
              <el-input class="filter-item" v-model="ProjectList.formFilter.shorthand"
                        :clearable="true" placeholder="简称"/>
            </el-form-item>
            <el-form-item label="创建日期" prop="formFilter.gmtCreate">
              <date-range class="filter-item" v-model="ProjectList.formFilter.gmtCreate"
                          :clearable="true"
                          :allowTypes="['day']"
                          align="left"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd HH:mm:ss"/>
            </el-form-item>
            <el-button slot="operator" type="default" :plain="true" :size="defaultFormItemSize"
                       @click="onResetProjectList">重置</el-button>
            <el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize"
                       @click="refreshProjectList(true)">查询</el-button>
            <el-button slot="operator" type="primary" :plain="true" :size="defaultFormItemSize"
                       @click="onProjectFormClick">新增</el-button>
          </filter-box>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-table ref="project" :data="ProjectList.Project.impl.dataList" :size="defaultFormItemSize"
                    @sort-change="ProjectList.Project.impl.onSortChange" header-cell-class-name="table-header=gray">
            <el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
                             :index="ProjectList.Project.impl.getTableIndex"/>
            <el-table-column label="项目ID" prop="id">
            </el-table-column>
            <el-table-column label="项目名称" prop="name">
            </el-table-column>
            <el-table-column label="简称" prop="shorthand">
            </el-table-column>
            <el-table-column label="创建时间" prop="gmtCreate">
              <template slot-scope="scope">
                <span>{{formatDateByStatsType(scope.row.gmtCreate, 'day')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="开工日期" prop="startDate">
              <template slot-scope="scope">
                <span>{{formatDateByStatsType(scope.row.startDate, 'day')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="竣工日期" prop="finishDate">
              <template slot-scope="scope">
                <span>{{formatDateByStatsType(scope.row.finishDate, 'day')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark">
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button @click.stop="onProjectFormEditClick(scope.row)" type="text"
                           :size="defaultFormItemSize">编辑</el-button>
                <el-button type="text" :size="defaultFormItemSize">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 10px;">
            <el-pagination
              :total="ProjectList.Project.impl.totalCount"
              :current-page="ProjectList.Project.impl.currentPage"
              :page-size="ProjectList.Project.impl.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, prev, pager, next, sizes"
              @current-change="ProjectList.Project.impl.onCurrentPageChange"
              @size-change="ProjectList.Project.impl.onPageSizeChange">
            </el-pagination>
          </el-row>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import { findTreeNode, findTreeNodePath, findItemFromList } from '@/utils';
  import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
  import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins';
  import { EnterStaffCheckController, DictionaryController } from '@/api';
  import SysProjectController from "../../api/Controller/SysProjectController";
  import projectForm from "@/views/myOrg/projectForm.vue";
    export default {
      name: "projectList",
      props:{},
      mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
      data () {
        return {
          ProjectList: {
            formFilter: {
              id: undefined,
              name: undefined,
              projectSummary: undefined,
              gmtCreate: [],
              startDate: undefined,
              finishDate: undefined,
              shorthand: undefined,
              remark: undefined
            },
            formFilterCopy: {
              id: undefined,
              name: undefined,
              projectSummary: undefined,
              gmtCreate: [],
              startDate: undefined,
              finishDate: undefined,
              shorthand: undefined,
              remark: undefined
            },
            Project: {
              impl: new TableWidget(this.loadProjectWidgetData,this.loadProjectVerify,true,false,'gmtCreate',0)
            },
            isInit: false
          }
        }
      },
      methods: {
        onResetProjectList () {
          this.$refs.ProjectListFilter.resetFields();
          this.refreshProjectList(true);
        },
        loadProjectWidgetData (params) {
          if (params == null) params = {};
          params = {
            ...params,
            sysProjectDtoFilter: {
              id: this.ProjectList.formFilterCopy.id,
              name: this.ProjectList.formFilterCopy.name,
              projectSummary: this.ProjectList.formFilterCopy.projectSummary,
              startDate: this.ProjectList.formFilterCopy.startDate,
              finishDate: this.ProjectList.formFilterCopy.finishDate,
              shorthand: this.ProjectList.formFilterCopy.shorthand,
              gmtCreateStart: Array.isArray(this.ProjectList.formFilterCopy.gmtCreate) ? this.ProjectList.formFilterCopy.gmtCreate[0] : undefined,
              gmtCreateEnd: Array.isArray(this.ProjectList.formFilterCopy.gmtCreate) ? this.ProjectList.formFilterCopy.gmtCreate[1] : undefined,
              remark: this.ProjectList.formFilterCopy.remark
            }
          };
          return new Promise((resolve, reject) => {
            SysProjectController.list(this,params).then(res => {
              resolve({
                dataList: res.data.dataList,
                totalCount: res.data.totalCount
              });
            }).catch(e => {
              reject(e);
            });
          });
        },
        loadProjectVerify () {
          this.ProjectList.formFilterCopy.id = this.ProjectList.formFilter.id;
          this.ProjectList.formFilterCopy.name = this.ProjectList.formFilter.name;
          this.ProjectList.formFilterCopy.projectSummary = this.ProjectList.formFilter.projectSummary;
          this.ProjectList.formFilterCopy.gmtCreate = this.ProjectList.formFilter.gmtCreate;
          this.ProjectList.formFilterCopy.startDate = this.ProjectList.formFilter.startDate;
          this.ProjectList.formFilterCopy.finishDate = this.ProjectList.formFilter.finishDate;
          this.ProjectList.formFilterCopy.shorthand = this.ProjectList.formFilter.shorthand;
          this.ProjectList.formFilterCopy.remark = this.ProjectList.formFilter.remark;
          return true;
        },
        refreshProjectList (reloadData = false) {
          if (reloadData) {
            this.ProjectList.Project.impl.refreshTable(true,1);
          } else {
            this.ProjectList.Project.impl.refreshTable();
          }
          if (!this.ProjectList.isInit) {

          }
          this.ProjectList.isInit = true;
        },
        onProjectFormClick () {
          let params = {};
          alert('点击新增');
        },
        /**
         * 编辑
         */
        onProjectFormEditClick (row) {
          let params = {
            id: row.id
          };

          this.$dialog.show('编辑',projectForm,{
            area: '800px'
          },params).then(res => {
            this.ProjectList.Project.impl.refreshTable();
          }).catch(e => {});
        },
        /**
         * 初始化
         */
        formInit () {
          this.refreshProjectList();
        }
      },
      mounted () {
        this.formInit();
      },
    }
</script>

<style scoped>

</style>
